import type { TeacherDispatchType } from '../interface'
import { SkeletonParagraphWrap } from '@/components/Common/Skeleton'
import { useFetchPageList } from '@/hooks/useFetchPageList'
import { Empty, InfiniteScroll } from 'antd-mobile'
import { history } from 'umi'
import MoreLoader from '@/components/Common/MoreLoader'
import TeacherDispatchCard from '../components/TeacherDispatchCard'
import styles from './index.module.less'
import Searcher from '@/components/Common/Searcher'

/** 师资派遣 */
const TeacherDispatch = () => {
    const {
        dataList,
        hasMore,
        loading,
        loadMore,
        updateFilterParams,
    } = useFetchPageList<TeacherDispatchType.Data>(`/country/group`)

    /** 搜索选项 */
    const searcherOption = [
        { label: '名称', param: 'name' as const },
        { label: '单位', param: 'category_id' as const },
    ]

    /** 点击师资派遣Item */
    const onClickDispatch = (item: TeacherDispatchType.Data) => {
        history.push({
            pathname: '/teacherDispatch/detail',
            query: { id: String(item.id) },
        })
    }

    return (
        <div>
            <Searcher
                options={searcherOption}
                onParamValueChange={(param, value) => {
                    updateFilterParams({ [param]: value })
                }}
            />

            <div className={styles.content}>
                <SkeletonParagraphWrap
                    animated
                    lineCount={10}
                    loading={dataList.length === 0 && loading}
                >
                    {dataList.length > 0 && (
                        <>
                            <div>
                                {dataList.map(item => {
                                    return (
                                        <TeacherDispatchCard
                                            key={item.id}
                                            item={item}
                                            onClickItem={onClickDispatch}
                                        />
                                    )
                                })}
                            </div>
                            <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
                                <MoreLoader hasMore={hasMore} />
                            </InfiniteScroll>
                        </>
                    )}

                    {dataList.length === 0 && <Empty description="暂无数据" />}
                </SkeletonParagraphWrap>
            </div>
        </div>
    )
}

export default TeacherDispatch
